<template>
	<view>
		<!-- 头部连续学习天数展示 -->
		<view class="learning">
			<view class="content">
				已连续学习<text class="day" :style="{'color':themeColor}">{{continueNum}}</text>天
			</view>
		</view>
		<!-- 日历展示区域 -->
		<calendar2 :selected="calendarSelected" @change="change" ></calendar2>
		<!-- 当前日期 -->
		<view class="dayShow">{{date}}</view>
		<!-- 提示语 -->
		<view class="tip">
			<image mode="widthFix" :src="imageUrl"></image>
		</view>
		<!-- 单词展示 -->
		<view class="wordShow">
			<view class="showItem" v-for="item in word">
				<view class="word">{{item.word}}</view>
				<view class="chinese">{{item.meanCn}}</view>
			</view>
		</view>
		
		<!-- 提示信息弹窗 -->
		<popup ref="popup"></popup>
	</view>
</template>

<script>
	import calendar2 from '../../../components/calendar/uni-calendar.vue'
	import popup from "@/components/popup.vue";
	import {getDayInfo,getPunchContinue,getPunchMonth} from "@/api/user.js";
	export default {
		components:{popup,calendar2},
		data() {
			return {
				date:"",  // 当前日期
				tip:"congratulations", // 提示语
				imageUrl:"",
				calendarSelected:[],
				word:[],
				themeColor:"",
				themeColorLess:"",
				continueNum:0,
			}
		},
		onLoad(){
			//获取主题颜色
			let color = uni.getStorageSync("color");
			this.themeColor = JSON.parse(color).themeColor;
			this.themeColorLess = JSON.parse(color).themeColorLess;
			this.date = this.getNowDate();
			this.getPunchContinue();
			this.getDayInfo(this.date);
			this.getPunchMonth();
		},
		methods: {
			/**
			 * 点击日历日期触发
			 */
			change(e){
				this.date = e.fulldate;
				this.getDayInfo();
			},
			
			/**
			 * 获取当前日期
			 */
			getNowDate() {
			    const timeOne = new Date()
			    const year = timeOne.getFullYear()
			    let month = timeOne.getMonth() + 1
			    let day = timeOne.getDate()
			    month = month < 10 ? '0' + month : month
			    day = day < 10 ? '0' + day : day
			    const NOW_MONTHS_AGO = `${year}-${month}-${day}`
			    return NOW_MONTHS_AGO
			},
			
			/**
			 * 获取某日打卡信息
			 */
			async getDayInfo(){
				let ans = (await getDayInfo(this.date)).data;
				console.log("getDayInfo",ans);
				if (ans.code != 200) {
					this.$refs.popup._popError(ans.error);
					return;
				}
				this.word = ans.data.dayWordLists;
				if (ans.data.complete == 1) {
					this.imageUrl = "https://lmusic-1302280959.cos.ap-chengdu.myqcloud.com/song/congratulations.png";
				} else if (ans.data.complete == 2) {
					this.imageUrl = "https://lmusic-1302280959.cos.ap-chengdu.myqcloud.com/song/notComplete.png"
				}
			},
			
			/**
			 * 获取连续打卡天数
			 */
			async getPunchContinue(){
				let ans = (await getPunchContinue()).data;
				console.log("getPunchContinue",ans);
				if (ans.code != 200) {
					this.$refs.popup._popError(ans.error);
					return;
				}
				this.continueNum = ans.data;
			},
			
			/**
			 * 获取当月打卡日期
			 */
			async getPunchMonth(){
				let ans = (await getPunchMonth()).data;
				console.log("getPunchMonth",ans);
				if (ans.code != 200) {
					this.$refs.popup._popError(ans.error);
					return;
				}
				this.calendarSelected = ans.data;
			}
		},
	}
</script>

<style lang="scss" scoped>
	// 头部连续学习天数展示
	.learning{
		display: flex;
		justify-content: center;
		
		.content{
			font-size: 30rpx;
			.day{
				font-weight: 600;
			}
		}
	}
	
	//当前日期
	.dayShow{
		margin: 50rpx $both-sides 0 $both-sides;
		font-size: 24rpx;
		font-weight: 600;
	}
	
	//提示语
	.tip{
		display: flex;
		justify-content: center;
		
		image{
			width: 300rpx;
		}
	}
	
	//单词展示
	.wordShow{
		margin: 50rpx $both-sides 0 $both-sides;
		font-size: 30rpx;
		.showItem{
			height: 50rpx;
			position: relative;
			margin-bottom: 16rpx;
			.word{
				position: absolute;
				left: 20%;
			}
			.chinese{
				color: #2f2f2f;
				position: absolute;
				left: 50%;
				margin-left: 30rpx;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}
		}
	}
	
</style>
